export default {
  //组件挂载时
  mounted(el, binding) {
    // console.log(el, binding);
    //el: <div class="nav-bar" >...</div>
    /**
     * binding:
     * {
     *   arg: undefined,
     *   dir: {mounted: ƒ, updated: ƒ},
     *   instance: Proxy {…},
     *   modifiers: {},
     *   oldValue: undefined,
     *   value: {
     *     activeClass: "nav-current",
     *     className: "nav-item",
     *     curIdx: 0
     *   }
     * }
     */
    const {
      activeClass,
      className,
      curIdx
    } = binding.value,
      oNavItems = el.getElementsByClassName(className);

    // console.log(oNavItems);
    //HTMLCollection(12) [div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item, div.nav-item]

    //给当前项加current-active类
    oNavItems[curIdx].className += ` ${activeClass}`;
  },
  //组件更新时
  updated(el, binding) {
    // console.log(el, binding);
    //el: <div class="nav-bar" >...</div>
    /**
     * binding:
     * {
     *   arg: undefined,
     *   dir: {mounted: ƒ, updated: ƒ},
     *   instance: Proxy {…},
     *   modifiers: {},
     *   oldValue: {
     *     activeClass: "nav-current"，
     *     className: "nav-item"，
     *     curIdx: 0
     *   },
     *   value: {
     *     activeClass: "nav-current",
     *     className: "nav-item",
     *     curIdx: 0
     *   }
     * }
     */
    const {
      activeClass,
      className,
      curIdx
    } = binding.value,
      oOptions = binding.oldValue,
      oNavItems = el.getElementsByClassName(className);

    //给当前项加current-active类
    oNavItems[curIdx].className += ` ${activeClass}`;
    oNavItems[oOptions.curIdx].className = className;
  }
}